@extends('home.layouts')
@section('content')
    <div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
        <div class="am-modal-dialog">
            <div class="am-modal-hd"><span id="commentTitle">发表评论</span>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd">
                <input type="hidden" name="cid" value="">
                <div class="am-form-group">
                    <textarea class="commentTextarea" rows="5" id="doc-ta-1" style="border: beige;width: 100%"></textarea>
                </div>
                <a class="am-btn am-btn-xs am-btn-danger" style="float: left;margin-left: 15%;" data-am-modal-close>取消</a>
                <button class="am-btn am-btn-xs am-btn-primary" style="float: right;margin-right: 15%;" onclick="comment({{$image['id']}})">提交</button>
            </div>
        </div>
    </div>
    <div class="pet_content_block">
        <article data-am-widget="paragraph" class="am-paragraph am-paragraph-default pet_content_article" data-am-paragraph="{ tableScrollable: true, pureview: false }">
            <h1 class="pet_article_title">{{$image['title']}}</h1>
            <div class="pet_article_user_time">发表于：{{date('Y-m-d H:i:s',$image['created_at'])}}</div>
            {{$image['describe']}}
            <figure data-am-widget="figure" class="am am-figure am-figure-default "   data-am-figure="{  pureview: 'true' }">
                @foreach(json_decode($image['images']) as $v)
                    @if($v!='undefined')
                        <img src="{{$v}}" data-rel="{{$v}}" alt="{{$title}}"/><br>
                    @endif
                @endforeach
            </figure>
        </article>
        <ul class="like_share_block">
            <li><a class="link_share_button" href="javascript:;"><i class="iconfont share_ico_link">&#xe62f;</i>{{$image['views']*10}}</a></li>
            <li>
                @if($image['uid']==Session::get('user')['id'] && !empty(Session::get('user')))
                    <a class="link_share_button" onclick="star({{$image['id']}},2)" style="color: red" id="starButton">已收藏</a>
                @else
                    <a class="link_share_button" onclick="star({{$image['id']}},2)" id="starButton">收藏</a>
                @endif
            </li>
            <li>
                @if(in_array(Session::get('user')['id'],$guan))
                    <a class="link_share_button" id="guanzhuz" style="color: red" onclick="star({{$image['user_id']}},3)">已关注作者</a>
                @else
                    <a class="link_share_button" id="guanzhuz" onclick="star({{$image['user_id']}},3)">关注作者</a>
                @endif
            </li>
            <li class="-mob-share-ui-button -mob-share-open" style="background: white;font-weight:normal">
                <a class="link_share_button">分享</a>
            </li>
        </ul>
        <!--MOB SHARE BEGIN-->
        <div class="-mob-share-ui" style="display: none">
            <ul class="-mob-share-list">
                <li class="-mob-share-weibo"><p>新浪微博</p></li>
                <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
                <li class="-mob-share-weixin"><p>微信</p></li>
                <li class="-mob-share-qzone"><p>QQ空间</p></li>
                <li class="-mob-share-qq"><p>QQ好友</p></li>
                <li class="-mob-share-renren"><p>人人网</p></li>
                <li class="-mob-share-kaixin"><p>开心网</p></li>
                <li class="-mob-share-douban"><p>豆瓣</p></li>
                <li class="-mob-share-youdao"><p>有道笔记</p></li>
            </ul>
            <div class="-mob-share-close">取消</div>
        </div>
        <div class="-mob-share-ui-bg"></div>
        <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=19a7f55a5d2f8"></script>
        <!--MOB SHARE END-->
    </div>
    <div class="pet_comment_list">
        <div class="pet_comment_list_wap"><div class="pet_comment_list_title">精彩评论</div>

            <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab" >
                <ul class="am-tabs-nav am-cf pet_comment_list_title_tab">
                    <li class="am-active"><a href="[data-tab-panel-0]">人气</a></li>
                    <li class=""><a href="[data-tab-panel-1]">最新</a></li>
                    <li class=""><a href="[data-tab-panel-2]">最早</a></li>
                </ul>
                <div class="am-tabs-bd pet_pl_list">
                    <div data-tab-panel-0 class="am-tab-panel am-active">
                        @foreach($comments['like'] as $c1)
                            <div class="pet_comment_list_block">
                                <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                                <div class="pet_comment_list_block_r">
                                    <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                    <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                    <div class="pet_comment_list_block_r_bottom">
                                        <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                        <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                            <span onclick="replyComment({{$c1['id']}})"
                                                  data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach

                    </div>
                    <div data-tab-panel-1 class="am-tab-panel ">
                        @foreach($comments['new'] as $c1)
                            <div class="pet_comment_list_block">
                                <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                                <div class="pet_comment_list_block_r">
                                    <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                    <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                    <div class="pet_comment_list_block_r_bottom">
                                        <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                        <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                            <span onclick="replyComment({{$c1['id']}})"
                                                  data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div data-tab-panel-2 class="am-tab-panel ">
                        @foreach($comments['old'] as $c1)
                            <div class="pet_comment_list_block">
                                <div class="pet_comment_list_block_l"><img src="{{$c1['avatar']}}-40X40" alt=""></div>
                                <div class="pet_comment_list_block_r">
                                    <div class="pet_comment_list_block_r_info">{{$c1['username']}}</div>
                                    <div class="pet_comment_list_block_r_text"><a style="color: black" href="{{url('commentdetail/'.$c1['id'])}}">{{$c1['comment']}}</a></div>
                                    <div class="pet_comment_list_block_r_bottom">
                                        <div class="pet_comment_list_bottom_info_l">{{date('Y-m-d H:i:s',$c1['created_at'])}}</div>
                                        <div class="pet_comment_list_bottom_info_r">
                                            <span onclick="star({{$c1['id']}},4)"><i
                                                        @if(in_array($c1['id'],$starCommentIds))
                                                        style="color:red;"
                                                        @endif
                                                        id="hand_{{$c1['id']}}" class="iconfont">&#xe631;</i><span id="likkkkk_{{$c1['id']}}">{{$c1['like']}}</span> </span>
                                            <span onclick="replyComment({{$c1['id']}})"
                                                  data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"> 回复({{$c1['replycount']}})</span></div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>




        </div>
    </div>
    <div class="pet_article_like">
        <div class="pet_article_like_title">猜你喜欢</div>

        <div class="pet_content_main pet_article_like_delete">
            <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
                <div class="am-list-news-bd">
                    <ul class="am-list">
                        <?php $currentId=$image['id'];?>
                                <!--缩略图在标题右边-->
                        @foreach($images as $img)
                            @if($currentId!=$img['id'])
                                <li class="am-g am-list-item-desced pet_list_one_block">
                                    <div class="pet_list_one_info">
                                        <div class="pet_list_one_info_l">
                                            <div class="pet_list_one_info_ico"><img src="
                                        @if(empty($img['avatar']))
                                                {{asset('assets/images/home/a1.png')}}
                                                @else
                                                {{$img['avatar']}}-40X40
                                                    @endif
                                                        " alt=""></div>
                                            <div class="pet_list_one_info_name">
                                                @if(empty($img['username']))
                                                    大佬
                                                @else
                                                    {{$img['username']}}
                                                @endif
                                            </div>
                                            <small> &nbsp;&nbsp;{{date('Y-m-d H:i:s',$img->created_at)}}发布</small>
                                        </div>
                                        <div class="pet_list_one_info_r">
                                            <div class="pet_list_tag pet_list_tag_kty">{{$img->category}}</div>
                                        </div>
                                    </div>
                                    <div class=" am-list-main">
                                        <h3 class="am-list-item-hd pet_list_one_bt"><a href="{{url('imagedetail/'.$img['id'])}}" class="">{{$img['title']}}</a></h3>
                                        <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3 am-avg-md-3 am-avg-lg-3 am-gallery-default pet_list_one_list pet_list_one_tytj" >
                                            @foreach(json_decode($img['images']) as $k=>$image)
                                                @if($image!='undefined')
                                                    @if($k<6)
                                                        <li>
                                                            <div class="am-gallery-item">
                                                                <a href="{{url('imagedetail/'.$img['id'])}}" class="">
                                                                    <img src="{{$image}}-300X230"  alt="图片" style="height: 81px;width: 106px;" />
                                                                </a>
                                                            </div>
                                                        </li>
                                                    @endif
                                                @endif
                                            @endforeach
                                        </ul>
                                    </div>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>

            </div>

        </div>
    </div>

    <span data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 330, height: 245}"
          style="position:absolute; bottom:60px;right: 3px; position:fixed;
            width: 30px;;right: 10px;background-color: #0dc6d4;font-size: 10px;
            padding: 4px 9px 4px 9px;font-weight: bold;color: whitesmoke">评论</span>
@endsection

@section('javascript')
    <script>
        function star(id,type){
            $.post('{{url('star')}}',{'_token':'{{csrf_token()}}','id':id,'type':type},function(res){
                if(res.status){
                    if(type==2){
                        /*文章收藏*/
                        $("#starButton").css('color','red').text('已收藏');
                    }else if(type==4){
                        /*评论点赞*/
                        $("#hand_"+id).css('color','red');
                        $("#likkkkk_"+id).text('').text($("#likkkkk_"+id).text()+1);
                    }else if(type==3){
                        /*关注作者*/
                        $("#guanzhuz").css('color','red').text('已关注作者');
                    }
                }
                layer.msg(res.msg);
            })
        }
        function comment(id){
            var comments=$(".commentTextarea").val();
            if($("input[name='cid']").val()==''){
                var postData={'_token':'{{csrf_token()}}','comment':comments,'cid':id,'type':2};
            }else{
                var reply=$("input[name='cid']").val();
                var postData={'_token':'{{csrf_token()}}','comment':comments,'cid':id,'reply':reply,'type':2};
            }
            $("input[name='cid']").val('');
            $.post('{{url('insertcomment')}}',postData, function (res) {
                if(res.status){
                    $("#doc-modal-1").modal('close');
                    layer.msg(res.msg);
                    location.reload();
                }else{
                    layer.msg(res.msg);
                }
            })
        }

        function replyComment(cid){
            $("#commentTitle").text('回复评论');
            $("input[name='cid']").val(cid);
        }
    </script>
@endsection